<!DOCTYPE html>
<%@ page
	language="java"
	contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	int rowNum = 16;
	if (null != request.getParameter("rows")) {
		rowNum = (int) Integer.valueOf(request.getParameter("rows"));
	}

	int colNum = 16;
	if (null != request.getParameter("cols")) {
		colNum = (int) Integer.valueOf(request.getParameter("cols"));
	}
%>
<html>
<head>
<link
	rel="shortcut icon"
	type="image/x-icon"
	href="./_img/icon_dot.ico" />
<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8">
<title>dotDesign</title>
<link
	rel="stylesheet"
	href="/d2/_css/dotDesign.css" />
<link
	rel="stylesheet"
	href="/d2/_css/selector.css" />
<script src="/d2/_js/common.js"></script>
<script src="/d2/_js/canvas.js"></script>
<script src="/d2/_js/dotDesign.js"></script>
<script src="/d2/_js/ajax.js"></script>
<script src="/d2/_js/ajaxForSql2.js"></script>
</head>
<body id="dotDesign">
	<div>
		<div id="comment"></div>
		<form
			method="post"
			action="./dotCtrl.jsp">
			<div id="controlers">
				<fieldset>
					<legend> 공통 </legend>
					<table class="specTable">
						<tr>
							<td class="d2">가로</td>
							<td
								id="cols"
								class="d3"><input
								type="button"
								id="removeCol"
								value="-" /> <input
								id="colNum"
								value="8"
								class="readOnly" /> <input
								type="button"
								id="addCol"
								value="+"></td>
						</tr>
						<tr>
							<td>세로</td>
							<td id="rows"><input
								type="button"
								id="removeRow"
								value="-" /> <input
								id="rowNum"
								value="8"
								class="readOnly" /> <input
								type="button"
								id="addRow"
								value="+" /></td>
						</tr>
						<tr>
							<td>셀 간격 <span id="exCellMargin">▼</span></td>
							<td><div class="styled-select">
									<select id="cMargin">
										<option value="0px">0 px * 0 px</option>
										<option value="1px">1 px * 1 px</option>
										<option value="2px">2 px * 2 px</option>
										<option value="4px">4 px * 4 px</option>
										<option value="8px">8 px * 8 px</option>
										<option value="16px">16 px * 16 px</option>
									</select>
								</div></td>
						</tr>
						<tr
							id="trMarginRight"
							class="detailAdjustment">
							<td>├ 셀 가로 간격</td>
							<td><div class="styled-select">
									<select id="cMarginRight">
										<option value="0px">0 px</option>
										<option value="1px">1 px</option>
										<option value="2px">2 px</option>
										<option value="4px">4 px</option>
										<option value="8px">8 px</option>
										<option value="16px">16 px</option>
									</select>
								</div></td>
						</tr>
						<tr
							id="trMarginTop"
							class="detailAdjustment">
							<td>└ 셀 세로 간격</td>
							<td><div class="styled-select">
									<select id="cMarginTop">
										<option value="0px">0 px</option>
										<option value="1px">1 px</option>
										<option value="2px">2 px</option>
										<option value="4px">4 px</option>
										<option value="8px">8 px</option>
										<option value="16px">16 px</option>
									</select>
								</div></td>
						</tr>
						<tr>
							<td>셀 크기 <span id="exCellSize">▼</span></td>
							<td><div class="styled-select">
									<select id="cellSize">
										<option value="8px">8 px * 8 px</option>
										<option value="12px">12 px * 12 px</option>
										<option value="16px">16 px * 16 px</option>
										<option value="20px">20 px * 20 px</option>
										<option value="24px">24 px * 24 px</option>
										<option value="32px">32 px * 32 px</option>
										<option value="40px">40 px * 40 px</option>
									</select>
								</div></td>
						</tr>
						<tr
							id="trCellWidth"
							class="detailAdjustment">
							<td>├ 셀 가로 크기</td>
							<td><div class="styled-select">
									<select id="cellWidth">
										<option value="8px">8 px</option>
										<option value="12px">12 px</option>
										<option value="16px">16 px</option>
										<option value="20px">20 px</option>
										<option value="24px">24 px</option>
										<option value="32px">32 px</option>
										<option value="40px">40 px</option>
									</select>
								</div></td>
						</tr>
						<tr
							id="trCellHeight"
							class="detailAdjustment">
							<td>└ 셀 세로 크기</td>
							<td><div class="styled-select">
									<select id="cellHeight">
										<option value="8px">8 px</option>
										<option value="12px">12 px</option>
										<option value="16px">16 px</option>
										<option value="20px">20 px</option>
										<option value="24px">24 px</option>
										<option value="32px">32 px</option>
										<option value="40px">40 px</option>
									</select>
								</div></td>
						</tr>
						<tr>
							<td>보더 두께</td>
							<td>
								<div class="selectorWrapper">
									<div
										id="borderWidthView_c"
										class="preview_Width"></div>
									<input
										id="borderWidth_c"
										class="readOnly selectorInput" /> <input
										type="button"
										id="borderWidth_btn_c"
										class="btnEx" />
								</div>
								<ul
									id="borderWidth_c_Ex"
									class="ex">
									<li>
										<div class="borderWidth_0px"></div> <span>0px</span>
									</li>
									<li>
										<div class="borderWidth_1px"></div> <span>1px</span>
									</li>
									<li>
										<div class="borderWidth_2px"></div> <span>2px</span>
									</li>
									<li>
										<div class="borderWidth_4px"></div> <span>4px</span>
									</li>
									<li>
										<div class="borderWidth_8px"></div> <span>8px</span>
									</li>
									<li>
										<div class="borderWidth_12px"></div> <span>12px</span>
									</li>
									<li>
										<div class="borderWidth_16px"></div> <span>16px</span>
									</li>
								</ul>
							</td>
						</tr>
						<tr>
							<td>눈금자</td>
							<td colspan="3"><input
								type="button"
								id="rulerCm"
								value=" cm "
								onclick="rule('cm')" /><input
								type="button"
								id="rulerPx"
								value=" px "
								onclick="rule('px')" /></td>
						</tr>
						<%
							/*
							 <tr>
							 <td>보더 두께</td>
							 <td>
							 <div
							 id="selector_borderWidth"
							 class="selector">
							 <div class="wrapper">
							 <div class="preview"></div>
							 <input class="readOnly preview_text" />
							 </div>
							 <ul class="selectList">
							 <li id="0px"><div class="preview 0px"></div> <span>0px</span></li>
							 <li id="1px"><div class="preview 1px"></div> <span>1px</span></li>
							 <li id="2px"><div class="preview 2px"></div> <span>2px</span></li>
							 <li id="4px"><div class="preview 4px"></div> <span>4px</span></li>
							 <li id="8px"><div class="preview 8px"></div> <span>8px</span></li>
							 <li id="12px"><div class="preview 12px"></div> <span>12px</span></li>
							 <li id="16px"><div class="preview 16px"></div> <span>16px</span></li>
							 </ul>
							 </div>
							 </td>
							 </tr>
							 <tr>
							 <td>보더 타입</td>
							 <td>
							 <div
							 id="selector_borderType"
							 class="selector">
							 <div class="wrapper">
							 <div class="preview"></div>
							 <input class="readOnly preview_text" />
							 </div>
							 <ul class="selectList">
							 <li id="solid"><div class="preview solid"></div> <span>solid</span></li>
							 <li id="dotted"><div class="preview dotted"></div> <span>dotted</span></li>
							 <li id="dashed"><div class="preview dashed"></div> <span>dashed</span></li>
							 <li id="double"><div class="preview double"></div> <span>double</span></li>
							 <li id="inset"><div class="preview inset"></div> <span>inset</span></li>
							 <li id="outset"><div class="preview outset"></div> <span>outset</span></li>
							 <li id="groove"><div class="preview groove"></div> <span>groove</span></li>
							 </ul>
							 </div>
							 </td>
							 </tr>
							 <tr>
							 <td>라운드 타입</td>
							 <td>
							 <div
							 id="selector_roundType"
							 class="selector">
							 <div class="wrapper">
							 <div class="preview"></div>
							 <input class="readOnly preview_text" />
							 </div>
							 <ul class="selectList">
							 <li id="0px"><div class="preview 0px"></div> <span>0px</span></li>
							 <li id="1px"><div class="preview 1px"></div> <span>1px</span></li>
							 <li id="2px"><div class="preview 2px"></div> <span>2px</span></li>
							 <li id="4px"><div class="preview 4px"></div> <span>4px</span></li>
							 <li id="8px"><div class="preview 8px"></div> <span>8px</span></li>
							 <li id="12px"><div class="preview 12px"></div> <span>12px</span></li>
							 <li id="16px"><div class="preview 16px"></div> <span>16px</span></li>
							 </ul>
							 </div>
							 </td>
							 </tr>*/
						%>
					</table>
				</fieldset>
				<fieldset>
					<legend>패널</legend>
					<table class="specTable">
						<tr>
							<td class="d32">색상</td>
							<td class="d40"><input
								id="colorPicker_pc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBGCP"></div></td>
							<td class="d32">보더 색상</td>
							<td class="d40"><input
								id="colorPicker_pbc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBCP"></div></td>
						</tr>
						<tr>
							<td class="d32">보더 타입</td>
							<td colspan="3">
								<div class="selectorWrapper">
									<div
										id="borderStyleView_p"
										class="preview_Style"></div>
									<input
										id="borderStyle_p"
										value="solid"
										class="readOnly selectorInput" /> <input
										type="button"
										id="btn_borderStyle_p"
										class="btnEx" />
								</div>
								<ul
									id="borderStyle_p_Ex"
									class="ex">
									<li>
										<div class="borderStyle_Solid"></div> <span>solid</span>
									</li>
									<li>
										<div class="borderStyle_Dotted"></div> <span>dotted</span>
									</li>
									<li>
										<div class="borderStyle_Dashed"></div> <span>dashed</span>
									</li>
									<li>
										<div class="borderStyle_Double"></div> <span>double</span>
									</li>
									<li>
										<div class="borderStyle_Inset"></div> <span>inset</span>
									</li>
									<li>
										<div class="borderStyle_Outset"></div> <span>outset</span>
									</li>
									<li>
										<div class="borderStyle_Groove"></div> <span>groove</span>
									</li>
								</ul>
							</td>
						</tr>
						<tr>
							<td class="d32">보더 두께</td>
							<td colspan="3">
								<div class="selectorWrapper">
									<div
										id="borderWidthView_p"
										class="preview_Width"
										class="borderWidthView"></div>
									<input
										id="borderWidth_p"
										class="readOnly selectorInput"
										value="4px" /> <input
										type="button"
										id="btn_borderWidth_p"
										class="btnEx" />
								</div>
								<ul
									id="borderWidth_p_Ex"
									class="ex">
									<li>
										<div class="borderWidth_0px"></div> <span>0px</span>
									</li>
									<li>
										<div class="borderWidth_1px"></div> <span>1px</span>
									</li>
									<li>
										<div class="borderWidth_2px"></div> <span>2px</span>
									</li>
									<li>
										<div class="borderWidth_4px"></div> <span>4px</span>
									</li>
									<li>
										<div class="borderWidth_8px"></div> <span>8px</span>
									</li>
									<li>
										<div class="borderWidth_12px"></div> <span>12px</span>
									</li>
									<li>
										<div class="borderWidth_16px"></div> <span>16px</span>
									</li>
								</ul>
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset>
					<legend>활성화</legend>
					<table class="specTable">
						<tr>
							<td class="d32">색상</td>
							<td class="d40"><input
								id="colorPicker_acc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBGCA"></div></td>
							<td class="d32">보더 색상</td>
							<td class="d40"><input
								id="colorPicker_acbc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBCA"></div></td>
						</tr>
						<tr>
							<td class="d32">보더 타입</td>
							<td colspan="3">
								<div class="selectorWrapper">
									<div
										id="borderStyle_a_View"
										class="preview_Style"></div>
									<input
										id="borderStyle_a"
										class="readOnly selectorInput" /> <input
										type="button"
										id="btn_borderStyle_a"
										class="btnEx" />
								</div>
								<ul
									id="borderStyle_a_Ex"
									class="ex">
									<li>
										<div class="borderStyle_Solid"></div> <span>solid</span>
									</li>
									<li>
										<div class="borderStyle_Dotted"></div> <span>dotted</span>
									</li>
									<li>
										<div class="borderStyle_Dashed"></div> <span>dashed</span>
									</li>
									<li>
										<div class="borderStyle_Double"></div> <span>double</span>
									</li>
									<li>
										<div class="borderStyle_Inset"></div> <span>inset</span>
									</li>
									<li>
										<div class="borderStyle_Outset"></div> <span>outset</span>
									</li>
									<li>
										<div class="borderStyle_Groove"></div> <span>groove</span>
									</li>
								</ul>
							</td>
						</tr>
						<tr>
							<td class="d32">라운드 타입</td>
							<td colspan="3">
								<div class="selectorWrapper">
									<div
										id="roundStyleView_a"
										class="preview_Style"></div>
									<input
										id="roundStyle_a"
										class="readOnly selectorInput" /> <input
										type="button"
										id="btn_roundStyle_a"
										class="btnEx" />
								</div>
								<ul
									id="roundStyle_a_Ex"
									class="ex">
									<li>
										<div class="roundStyle_0px"></div> <span>0px</span>
									</li>
									<li>
										<div class="roundStyle_1px"></div> <span>1px</span>
									</li>
									<li>
										<div class="roundStyle_2px"></div> <span>2px</span>
									</li>
									<li>
										<div class="roundStyle_3px"></div> <span>4px</span>
									</li>
									<li>
										<div class="roundStyle_6px"></div> <span>6px</span>
									</li>
									<li>
										<div class="roundStyle_8px"></div> <span>8px</span>
									</li>
									<li>
										<div class="roundStyle_12px"></div> <span>12px</span>
									</li>

								</ul>
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset>
					<legend>비활성화</legend>
					<table class="specTable">
						<tr>
							<td class="d32">색상</td>
							<td class="d40"><input
								id="colorPicker_dcc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBGCI"></div></td>
							<td class="d32">보더 색상</td>
							<td class="d40"><input
								id="colorPicker_dcbc"
								type="color"
								onchange="fn_colorPicker(this);" />
								<div
									class="colored styled-select"
									id="wrapperBCI"></div></td>
						</tr>
						<tr>
							<td class="d32">보더 타입</td>
							<td colspan="3">
								<div class="selectorWrapper">
									<div
										id="borderStyleView_i"
										class="preview_Style"></div>
									<input
										id="borderStyle_i"
										value="solid"
										class="readOnly selectorInput" /> <input
										type="button"
										id="btn_borderStyle_i"
										class="btnEx" />
								</div>
								<ul
									id="borderStyle_i_Ex"
									class="ex">
									<li>
										<div class="borderStyle_Solid"></div> <span>solid</span>
									</li>
									<li>
										<div class="borderStyle_Dotted"></div> <span>dotted</span>
									</li>
									<li>
										<div class="borderStyle_Dashed"></div> <span>dashed</span>
									</li>
									<li>
										<div class="borderStyle_Double"></div> <span>double</span>
									</li>
									<li>
										<div class="borderStyle_Inset"></div> <span>inset</span>
									</li>
									<li>
										<div class="borderStyle_Outset"></div> <span>outset</span>
									</li>
									<li>
										<div class="borderStyle_Groove"></div> <span>groove</span>
									</li>
								</ul>
							</td>
						</tr>
					</table>
				</fieldset>
				<fieldset>
					<legend>패턴</legend>
					<ul>
						<li onclick="setA('houndTooth')">Hound Tooth</li>
						<li>Hound Tooth Checker</li>
						<li onclick="setA('houndToothStitch')">Hound Tooth Stitch</li>
						<li>White Lodge Flooring</li>
					</ul>

				</fieldset>
				` <input
					id="btn_capture"
					type="button"
					value="capture" /> <input
					type="button"
					value="screen info"
					onclick="fn_submit()" />
				<table
					id="clientInfo"
					class="specTable">
					<tr>
						<td class="d2">브라우져 코드</td>
						<td class="d3"><span id="appCode"></span></td>
					</tr>
					<tr>
						<td>브라우저 이름</td>
						<td><span id="appName"></span></td>
					</tr>
					<tr>
						<td>브라우저 버전</td>
						<td><span id="appVer"></span></td>
					</tr>
					<tr>
						<td>사용 언어</td>
						<td><span id="appLang"></span></td>
					</tr>
					<tr>
						<td>시스템 코드</td>
						<td><span id="sysCode"></span></td>
					</tr>
					<tr>
						<td>UserAgent</td>
						<td><span id="userAgent"></span></td>
					</tr>
					<tr>
						<td>스크립트 가능 유무</td>
						<td><span id="scriptEnabled"></span></td>
					</tr>
					<tr>
						<td>오류 유무</td>
						<td><span id="taintEnabled"></span></td>
					</tr>
				</table>
				<input
					type="button"
					value="new"
					onclick='newPlace()' /> <input
					type="button"
					id="btnRotate"
					value="R"
					onclick="rotate();" /> <input
					id="textInput"
					type="text"
					value="sample text"> <select id="fontSelector">
					<option>font1</option>
					<option>font2</option>
					<option>font3</option>
					<option>font4</option>
					<option>font5</option>
					<option>font6</option>
					<option>font7</option>
				</select>
			</div>
			<div id="worker">
				<div id="placeRow"></div>
				<div id="placeCol"></div>
				<div id="workerPanel"></div>
				<div id="hiddenPanel"></div>
			</div>
			<div class="hiddenData"></div>
		</form>
	</div>
</body>
</html>